<template>
    <div>
          <!-- 搜索框 -->
          <div class="serch_input">
        <Input search placeholder="Enter something..." v-model="address" />
      </div>
      <!-- 地图容器 -->
      <div id="map"></div>
    </div>
  </template>
  
  <script>
  import mapboxgl from "mapbox-gl";
  import MapboxGeocoder from "@mapbox/mapbox-gl-geocoder";
  import "@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css";
  export default {
    data() {
      return {
        address: "",
      };
    },
    methods: {
      initMapbox() {
        mapboxgl.accessToken =
          "pk.eyJ1IjoiaGthZ2xqcSIsImEiOiJjazd6dDl4OWIwOWVsM21td3hqb3Q5aGxtIn0.IWC0fVRghs_jT5YAA_tKkw";
        /** 初始化地图 */
        const map = new mapboxgl.Map({
          container: "map", // container ID
          // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
          style: "mapbox://styles/mapbox/streets-v11", // style URL
          center: [116.404699729614, 39.91338563124771], // starting position [lng, lat]
          zoom: 10, // starting zoom
          projection: "globe", // display the map as a 3D globe
        });
        /** 地图右侧搜索框 */
        const geocoder = new MapboxGeocoder({
          // Initialize the geocoder
          accessToken: mapboxgl.accessToken, // Set the access token
          mapboxgl: mapboxgl, // Set the mapbox-gl instance
          marker: false, // Do not use the default marker style
        });
  
        // Add the geocoder to the map
        map.addControl(geocoder);
        /** 添加地图底部控制点 */
        map.addControl(new mapboxgl.NavigationControl());
        /** 标记点Mark */
        const marker = new mapboxgl.Marker({
          draggable: false,
          color: "orange",
        });
        /** 点击获取坐标点或地址 */
        map.on("click", (e) => {
          this.$Message.destroy();
          const features = map.queryRenderedFeatures(e.point);
          if (features.length === 0) {
            this.$Message.error("Not available");
            return;
          }
          let address = "";
          const { lng } = e.lngLat;
          const { lat } = e.lngLat;
          if (Object.keys(features[0].properties).includes("name")) {
            address = features[0].properties.name;
          } else {
            address = `[ ${lng}, ${lat} ]`;
          }
          this.address = address;
  
          console.log(features);
          console.log(address);
          console.log(e);
          /** 根据点击的坐标添加mark */
          marker.setLngLat(e.lngLat);
          marker.addTo(map);
        });
  
        map.on("style.load", () => {
          map.setFog({}); // Set the default atmosphere style
        });
      },
    },
    mounted() {
      this.initMapbox();
    },
  };
  </script>
  
  <style lang="less" scoped>
  #id {
    height: 500px;
  }
  // .mapboxgl-map {
  //   height: 400px !important;
  // }
  // .mapboxgl-control-container {
  //   display: none !important;
  // }
  .serch_input {
    width: 400px;
    margin-bottom: 20px;
  }
  </style>